<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<header>
    <!-- <meta charset="utf-8"> -->
    <meta charset="utf-8">
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/Main.css">
    <link rel="stylesheet" href="../css/head.css">
    <title>主页</title>
    <!-- 引入 layui.js -->
    <script type="text/javascript" src="../layui/layui.js"></script>
    <script type="text/javascript" src="../js/Main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script type="text/javascript" src="../js/axios.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/showdown@2.0.3/dist/showdown.min.js"></script>
</header>
<body bgcolor="#d2d2d2">
<div class="layui-container">
    <div th:replace="~{head :: navigation-bar}"></div>


    <!--    轮播图-->
    <div class="layui-carousel" id="test1">
        <div carousel-item class="show-foreach">
            <div>
                <span class="blog-title">
                        博客标题
                    </span>
                <img src="../picture/pexels-s-migaj-747964.jpg" alt="图片" class="show-item carousel-picture">


            </div>
            <div>
                <span class="blog-title">
                        博客标题
                    </span>
                <img src="../picture/pexels-daniel-battersby-9941679.jpg" alt="图片" class="show-item carousel-picture">

            </div>
            <div>
                <span class="blog-title">
                        博客标题
                    </span>
                <img src="../picture/pexels-rostyslav-savchyn-9897267%20(1).jpg" alt="图片"
                     class="show-item carousel-picture">

            </div>
        </div>
    </div>


    <!--    博客-->
    <div id="content-container">

        <ol>
            <li v-for="row in info" class="blog">
                <!--                {{blog.title}}-->
                <a class="title" v-bind:href="url+row.blogId">{{row.title}}</a>
                <div class="synopsis">
                    {{row.synopsis}}
                </div>

                <i class="layui-icon layui-icon-use" style="font-size: 18px; color: red;"></i>
                <span class="creatDate">{{row.creatDate.substr(0, 10)}}</span>
                <p class="userName">{{row.userName}}</p>
                <p hidden class="blogId">{{row.blogId}}</p>
            </li>
        </ol>

    </div>

</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#content-container',
        data: {
            info: [{
                blogId: null,
                title: null,
                content: null,
                synopsis: null,
                userId: null,
                creatDate: null,
            }],
            url: "http://localhost:8080/toDetail/"
        },
        mounted: function () {
            axios.post("http://localhost:8080/queryAllBlogs")
                .then(response => {
                        this.info = response.data.rows;
                    }
                )
                .catch(function (error) {
                    console.log(error);
                })

        },

    })
</script>
<script>
    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            , width: '50%' //设置容器宽度
            , height: '350px'
            , arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });
</script>

</html>